Попередня сторінка: 20. Автоматизовані засоби для створенн...
Наступна сторінка: Словник термінів з інформатики за 8 кл...
Зміст
1. Який вигляд має код розмітки вебсторінки мовою HTML?
2. Як створити простий HTML-документ?
3. Як форматувати тексту HTML-документі?
4. Як працювати зі списками в HTML-документі?
5. Як працювати із зображеннями в HTML-документі?
6. Як побудувати гіпертекстові зв’язки в HTML-документі?
ПРИГАДАЙТЕ:
- особливості вебсторінки;
- призначення текстового редактора Блокнот;
- розширення файлу вебсторінки;
- що називають кодом.
1. Який вигляд має код розмітки вебсторінки мовою HTML?
Ви вже пробували розробляти сайти за допомогою автоматизованих засобів. Вони самі конвертували сайт у файл із деяким HTML-кодом.
HTML (мова гіпертекстової розмітки) — це код, який використовується для структурування і відображення веб-сторінки та її контенту.
Створювати вебсторінки мовою HTML можна двома способами: за допомогою спеціального редактора HTML, у якому є заготовки та фрагменти готового коду, або писати безпосередньо на HTML. Другий спосіб часто буває легшим, ніж вивчати HTML-редактор або конвертер, які часто обмежені у своїх функціях, містять помилки або проводять поганий HTML-код, який не працює на різних платформах.
Мова HTML існує в декількох варіантах і продовжує розвиватися, але її конструкції, найімовірніше, будуть використовуватися і надалі. Вивчаючи й пізнаючи HTML детальніше, створюючи документ на початку вивчення HTML і розширюючи його, наскільки це можливо, ми маємо змогу створювати документи, які можуть бути переглянуті багатьма браузерами, — як зараз, так і в майбутньому.
Типовий простий вебдокумент складається з текстових блоків (абзаців, списків, таблиць), кількох малюнків невеликих розмірів, горизонтальних розмежувальних ліній та гіперпосилань. Складніші вебдокументи містять фрейми (структуровані сторінки), елементи управління (кнопки, перемикачі, поля діалогу), динамічні ефекти та графічні рухомі об’єкти тощо.
Основою мови HTML є дескриптори — команди, що вказують на правила, за якими форматуються документи. Команди мови HTML називають тегами. Отже, крім текстових даних, вебсторінка містить невидимий для користувача HTML-код, тобто набір тегів. Під час відкриття вебсторінки браузер використовує цей набір для відображення її елементів у заданому порядку.
Назва кожного тегу — це одна або декілька літер, взятих у дужки «<» та «>», яким відповідають певні англійські слова, що пояснюють їх призначення. Наприклад, назва тегу <BODY> виникла від англійського слова body — тіло, головна частина, а сам тег використовується для створення вмісту вебсторінки.
Тег записують так: <Тег> текст </Тег>. Слово <Тег> (так званий відкриваючий тег) позначає місце початку дії тегу на сторінці, текст — фрагмент тексту, до якого буде застосовано форматування, </Тег> (закриваючий тег) визначає місце закінчення дії тегу на сторінці. Пару тегів (відкриваючий і закриваючий) називають контейнером. Закриваючий тег відрізняється від відкриваючого лише тим, що в коді перед його ім’ям ставиться символ «/». Більшість тегів є парними, однак є і одинарні теги.
Один тег може мати кілька параметрів — атрибутів. Наприклад,
Закриваючий тег не містить жодних параметрів. На відміну від нього, у відкриваючому тегу вказуються всі необхідні параметри.
Правила запису параметрів: після назви тегу після пропуску зазначається ім’я параметра (наприклад, ALIGN — ім’я параметра, який вказує на спосіб вирівнювання тексту), далі вказується знак «=» й у лапках записується значення параметра (наприклад, ALIGN="center"). За необхідності далі вказують інші параметри через пропуск. Після останнього параметра записується символ >.
Теги можуть бути вкладеними, тобто один контейнер може перебувати всередині іншого, у такому разі загальний запис виглядатиме так:
2. Як створити простий HTML-доку мент?
Для підготовки найпростішого HTML-файлу можна використати текстовий редактор Блокнот, після написання коду в якому слід
задати файлу ім’я та вказати розширення — htm. Програмування тут суто символічне.
Програма мовою HTML має таку структуру:
Текст, який буде відображатися на рядку заголовка браузера
Основними параметрами тегу <BODY> є:
Для зручного сприймання всі теги набирають великими літерами, хоча браузер однаково сприймає теги, написані й малими літерами. Не є обов’язковим також і написання тегів з нового рядка, проте код, записаний в одному рядку, читається гірше, особливо тими, хто цей код не створював. У багатьох випадках для складних сторінок між окремими блоками коду вставляють порожні рядки, поділяючи його на фрагменти, щоб полегшити читання коду.
Вправа 1. Перегляд коду вебсторінки.
Завдання. Перегляньте HTML-код вебсторінки національного заповідника «Замки Тернопілля». Знайдіть заголовок, титульну назву, малюнок, звичайний текст, відформатований текст, посилання на іншу сторінку, список, таблицю.
1. Відкрийте вебсторінку національного заповідника «Замки Тернопілля» за посиланням
https://zamky
. te.ua/у браузері та знайдіть заголовок, титульну назву, малюнок, звичайний текст, відформатований текст, посилання на іншу сторінку.
Не закриваючи вікно браузера, відкрийте цю сторінку для перегляду. Використайте для цього вказівку контекстного меню Переглянути джерело сторінки (якщо ви працюєте в браузері Chrome) (мал. 21.1).
2. Проаналізуйте структуру HTML-документа та знайдіть відповідні елементи в браузері й у тексті коду.
3. У HTML-документі знайдіть подвійні теги, одинарні теги, визначте призначення окремих елементів, відшукуючи відповідні англомовні слова, які допоможуть пояснити кожний елемент.
Вправа 2. Перегляд коду вебсторінки.
Завдання. Складіть простий документ, який міститиме лише заголовок вікна за зразком (мал. 21.2).
1. Відкрийте текстовий редактор Блокнот.
2. Введіть у ньому структуру HTML-документа (мал. 21.2).
3. Збережіть файл з ім’ям page1.htm.
4. Відкрийте створений файл, проаналізуйте зовнішній вигляд створеного файлу в браузері (мал. 21.3).
5. Поверніться до збереженого файлу в Блокноті.
6. Внесіть до нього такі зміни: укажіть у назві сторінки: прізвище, ім’я, школу, клас, захоплення. До елемента <TITLE> введіть:
7. Збержіть файл KKpage2.htm.
8. Перегляньте результат у браузері.
3. Як форматувати текст у HTML-документі?
Процес структурування сторінки можна розглядати з декількох позицій: заголовки, вирівнювання, новий рядок, абзац, примусове розміщення, лінія.
Для формування заголовків використовують теги <Нп>...</Нп>, де п = 1...6. При п = 1 отримуємо заголовок найвищого рівня, відповідно при п = 6 — заголовок найнижчого рівня.
Об’єкти сторінки можуть бути вирівняні за допомогою атрибута ALIGN, який має чотири значення, що визначають спосіб вирівнювання тексту:
На відображення документа в браузері не впливають символи кінця рядка, які отримують натискуванням клавіші Enter або Shift+ Enter, а також пропуски. Для перенесення тексту на новий рядок використовують одинарний тег <BR>.
Для створення абзаців використовують парний тег <Р>...</Р>.
При використанні тегу <Р> спочатку вставляється порожній рядок, далі текст виводиться з початку нового рядка. Якщо вжито тег <BR>, то порожній рядок не вставляється.
Для виділення тексту, який має певне розміщення символів (наприклад, шаблон документа), використовують тег <PRE> текст із вимушеними пропусками та перенесенням у рядки </PRE>.
Щоб відділити одну ділянку тексту від іншої, зазвичай використовують підкреслення горизонтальною лінією. Тег <HR> зображує на екрані горизонтальну лінію. Наприклад,
лінія по центру, розміром 3 пункти (позначається «пт»), яка займає 50 % ширини сторінки;
— лінія по центру червоного кольору, довжиною 400 пікселів, розміром 5 пт.
Як видно з прикладів, графічний об’єкт може мати такі атрибути:
• розмір — у пунктах;
• ширину WIDTH — у відсотках або пікселях;
• колір — назвами кольорів англійською мовою або їхніх кодів (наприклад, #0000FF — бірюзовий).
Для роботи із символами використовують такі теги форматування:
• тип шрифту;
• колір шрифту;
• розмір шрифту;
• накреслення.
Ter <FONT> використовують для роботи із символами. Гарнітура шрифту задається за допомогою атрибута FACE. Його можливі значення — назви шрифтів (наприклад, Агіаі) або ключові слова, які визначають зовнішній вигляд шрифту, наприклад:
• Serif — із насічками;
• San_serif — без насічок;
• Monospace — непропорційний;
• Cursive — рукописний.
Якщо вказується ключове слово, то зі списку шрифтів на комп’ютері користувача браузер вибирає для вебсторінки найбільш відповідний.
Якщо вказувати конкретну гарнітуру, то такого шрифту на комп’ютері користувача може не виявитися, і він в такому разі не зможе переглянути текст. Тому можна вказувати декілька шрифтів:
Опрацьовуючи такий запис, браузер спочатку намагатиметься знайти шрифт Verdana, а потім, якщо такого шрифта не виявиться, — Агіаі.
Якщо жодного зі шрифтів не знайдено, то встановлюється будь-який шрифт без насічок.
Колір шрифту задається за допомогою атрибута COLOR за назвою кольорів:
• aqua — бірюзовий;
• black — чорний;
• blue — світло-синій;
• fuchsia — бузковий;
• gray — сірий;
• green — зелений;
• lime — салатовий;
• тгооп — бордовий;
• navy — синій;
• olive — оливковий;
• purple — фіолетовий;
• red — червоний;
• silver—сріблястий;
• teal — сіро-зелений;
• white — білий;
• yellow — жовтий.
Розмір шрифту задається за допомогою атрибута SIZE, що може набувати таких значень:
• цілі числа від 1 до 7, де числу 1 відповідає розмір шрифту 8 пт, числу 2 — 10 пт, 3 — 12 пт, 4 — 14 пт, 5 — 18 пт, 6 — 24 пт, 7 — 36 пт;
• числа від 1 до 6 та від -6 до -1, на скільки одиниць шрифт має відрізнятися від встановленого за замовчуванням (у більшості за замовчуванням розмір шрифту 3 — 12 пт).
Розміри шрифту можна змінювати за допомогою тегів <BIG> і <SMALL>. Перший з них збільшує розмір шрифту щодо прийнятого за замовчуванням на одиницю, другий — зменшує його, теж на одиницю.
Ter <BASEFONT> дає змогу встановити базові параметри шрифту. Так, запис <BASEFONT SIZE=4> означає, що для всього коду до закриваючого тегу </BASEFONT> значення шрифту становитиме 14 пт, крім тих фрагментів, де це значення змінюється тегом <FONT>.
Для встановлення типу накреслення використовуються такі контейнери:
• <В>...< /В> — напівжирний;
• <!>...< /1 > — курсив;
• <и>...</и> — підкреслений;
• <sub>...</sub> — нижній індекс;
• <sup>...</sup> — верхній індекс.
4. Як працювати зі списками в HTML-доку менті?
До HTML-документа можна вставляти маркований і нумерований списки. Для цього використовуються відповідні теги:
Маркований список
5. Як працювати із зображеннями в HTML -документі?
Зображення можна використовувати в HTML-документах так:
• для зміни фону сторінки;
• як ілюстрацію на сторінці;
• як посилання на інший об’єкт;
• як маркер у списку.
У HTML-документі можна використовувати зображення різного формату. Розмір файлу зображення визначає швидкість появи зображення на екрані. Графіка, яка повільно завантажується, може «відля-кати» відвідувачів сторінок. Для зменшення розміру файлу необхідно використовувати зображення формату JPG або GIF. Допустимими зображеннями є такі, розмір яких не перевищує 40-50 кБ.
На вебсторінках графічні зображення можна розміщувати різними способами. Вбудовані зображення — це графічні зображення, які завжди залишаються в одному й тому самому місці сторінки й не обтіпаються текстом. Плаваючі зображення — це зображення, що не прив’язуються до одного рядка тексту й ніби «плавають» уздовж одного з полів та обтіпаються текстом.
Для вставляння до документа малюнка використовується одинарний тег <IMG> (від англ. image — зображення) з такими параметрами:
SRC=iM' я_файла (від англ. source — джерело).
Наприклад, за командою <IMG SRC=pr.gif> на екрані буде відображатися вміст графічного файлу pr.gif, що зберігається в поточному каталозі.
Параметр АЬТ="текст_напису" використовується в тому разі, коли браузер не знаходить зображення у вказаному місці на диску, тоді замість нього на екрані відображається маленький прямокутник з відповідним надписом у його середині, який задано параметром ALT. Цей параметр рекомендується використовувати завжди.
Параметри WlDTH=n і HElGHT=m задають ширину й висоту (у піксе-лях) прямокутника, у який виводиться картинка. Якщо параметри не задано, то зображення відображається в її розмірах. Коли розміри прямокутника не збігаються з розмірами зображення, браузер масштабує його, враховуючи значення, вказані параметрами WIDTH і HEIGHT.
Параметр ALIGN дає змогу визначити положення ілюстрації щодо сусідніх об’єктів, цей параметр використовується для створення плаваючих зображень. Для плаваючих зображень значення цього атрибута можуть бути left або right. Для вбудованих зображень цей параметр не використовується. При використанні вирівнювання зображень до лівої та правої меж часто намагаються зробити так, щоб текст виводився під зображенням, а не збоку від нього. Для цього використовується вказівка
Вправа 4. Вставляння зображень до вебсторінки.
Завдання. Змініть файл Відпочинок з папки Сайти, що міститься в спільному сховищі за вказаними параметрами (мал. 21.4).
1. Додайте малюнок Rafting.jpg.
2. Уведіть текст, який має з’являтися на екрані, якщо при перегляді файла браузером графічний файл не знайдено.
3. Змініть тип вирівнювання малюнка.
4. Задайте заголовок так, щоб він був розташований праворуч від малюнка.
5. Змініть шрифт тексту в списку.
6. Як побудувати гіпертекстові зв’язки в HTML-документі?
Гіперпосилання може бути подано різними способами: крім тексту, ще й малюнком, картою (розміченим малюнком), списком-меню, екранною кнопкою тощо.
Існують два основні типи гіперпосилань: внутрішні та зовнішні.
Внутрішні гіперпосилання — це посилання на об’єкти в межах одного документа. За їхньою допомогою можна переміщуватися всередині однієї вебсторінки. Такі посилання доцільно використовувати на довгих сторінках, щоб мати можливість швидко переміщуватись між розділами.
Зовнішні гіперпосилання — це посилання на віддалені HTML-файли або на будь-які файли, які належать до HTML-документів.
Для завдання гіпертекстового переходу до іншого документа використовується парний тег <А> (від англ. anchor— якір).
Формат вказівки для зовнішнього посилання такий:
Після виконання такої вказівки на екран виводиться посилання: текст посилання. При зверненні лівою кнопкою миші до посилання з текстом текст посилання (для чого досить установити курсор миші на виділений текст і натиснути ліву клавішу миші) здійснюватиметься перехід до файлу, у якому зберігається ця сторінка. Ім’я такого файлу вказується після атрибута HREF.
Якщо в тегу <А> вказано ім’я файлу, то при перегляді такого документа з відповідним посиланням браузер шукає його в тому ж
каталозі, у якому розташований файл із посиланням. Коли необхідно здійснити посилання на файл, розташований в іншому каталозі, слід зазначити в тегу <А>:
• або повний шлях до файлу, починаючи з імені дисковода (тобто його абсолютну адресу);
• або шлях щодо файлу з посиланням — відносну адресу.
Приклади опису посилань:
Для здійснення гіпертекстового переходу всередині документа використовують два теги <А>. Перший тег з параметром HREF є джерелом переходу, тобто посиланням, яке вказує, куди слід перейти; другий з параметром NAME — приймачем, тобто це мітка, яка фіксує місце переходу.
Елемент <А HREF=#HasBa_мітки>тєкст посилання </А> задає
перехід на мітку, яка має ім’я назва_мітки (для цього прикладу) і міститься в документі. Тут # — ключовий символ, який вказує, що використовується мітка, а не файл.
Назва мітки — ім’я для мітки, яке вибирає користувач.
Текст посилання — фрагмент, який буде відображатися на екрані як посилання. Для того щоб посилання спрацювало, необхідно, щоб в цьому самому документі існувала вказівка:
Назва мітки — це довільний текст, який не з’являється на екрані й однозначно визначає місце переходу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви.
Рекомендації до використання переходів усередині документа.
1. Вибрати ім’я для мітки. Ім’я має бути унікальним у HTML-документі, це означає, що інших міток з таким ім’ям у документі бути не повинно.
2. Запрограмувати перехід за міткою, тобто в місці переходу потрібно написати вказівку виду <А HREF=#MiTKa> текст </А>.
3. Установити тег з міткою в потрібному місці HTML-документа, тобто перед фрагментом HTML-документа, на який повинен виконуватися перехід, записати тег-мітку:
При цьому ім’я мітки повинно бути таким само, як і в команді, що задає перехід.
Для того щоб використати картинку як посилання, достатньо записати елемент посилання в основному документі:
Тобто до звичайного посилання замість тексту вставляється елемент, за яким викликається на екран графічний файл. При цьому у вказівках виклику графічних файлів можна використовувати всі традиційні параметри.
Вправа 5. Сторінка з гіперпосиланнями.
Завдання. Змініть файл Гурток з папки Сайти, що міститься в спільному сховищі, так, щоб у браузері отримати сторінку (мал. 21.5).
1. Відкрийте файл Гурток з папки Сайти, що міститься в спільному сховищі, у браузері. Перегляньте, чи відображається його вміст так, як на малюнку.
2. Збережіть файл у папці Сайти своєї структури папок. Додайте до своєї папки також усі потрібні графічні файли.
3. Внесіть правки до параметрів тегу <img SRC="point.gif" align=bottom>, додавши висоту (HEIGHT=10 0) та ширину (width=100) малюнка.
4. Змініть фрагмент тексту списку так, щоб додати до виділеного слова гіперпосилання. Наприклад, <А HREF="notthere .htm"> Розклад </А>.
5. Вносьте зміни за зразком. Збережіть остаточний файл.
1. Обговоріть, які відомості, подані на сайті за адресою
https://goo.gl/
bC3WD4, доповнюють матеріал підручника.
2. Обговоріть, як можна застосувати онлайновий підручник
(https://www.w3schools.com/html/html_intro.asp) та онлайновий тренажер (https://www . w3schools. com/html/html_examples. asp)
з мови HTML у своєму навчанні. Наведіть одне одному свої пропозиції. У чому відмінність цих ресурсів?
3. Обговоріть, як можна використати приклад форматування веб-сторінки (мал. 21.6) на сайті
https://htmlg.com/html-editor/
для створення власних вебсторінок. Хтось висловлює припущення, а хтось — перевіряє його. Потім міняєтесь ролями.
4. Попрацюйте в груповому проекті «Професії майбутнього». Оберіть, хто для якої професії створюватиме вебсторінку. Створіть вебсто-рінки, у яких зазначено опис та основні вимоги до працівників в обраній професії. Оформіть їх відповідним чином і збережіть кожну окрему сторінку під відповідним іменем до папки Професії. Створіть спільну сторінку зі списком усіх професій, з якої можна перейти на кожну створену сторінку.
5. Попрацюйте в груповому проекті «Відомі люди нашого краю». Обговоріть список відомих людей. Оберіть, хто для якої людини створюватиме вебсторінку. Створіть вебсторінки, у яких вказано біографічні дані та досягнення відомої людини, її фото та посилання на профіль в інтернеті (наприклад, у Вікіпедії). Оформіть сторінки
відповідним чином і збережіть кожну окрему сторінку під відповідним іменем до папки Люди. Створіть спільну сторінку зі списком усіх персоналій, з якої можна перейти на кожну створену сторінку.
6. Створіть вебсторінку про вашу родину: склад, традиції, професії та інше.
7. Створіть вебсторінки, які містять такі відомості (за потреби скористайтесь пошуком в інтернеті):
1) області України: кількість населення, площа;
2) держави-сусіди України: їхні назва, площа, адміністративний устрій, столиця;
3) назви міст України, у яких нараховується населення понад 1 млн жителів, зображення-візитівка міста;
4) список великих річок, що протікають через Україну.
8. Створіть вебсторінку вашого класу. Як приклад, вона може мати вигляд, поданий у файлі Структура вебсторінки в папці Сайти на спільному ресурсі.
Оцініть результати свого навчання за шкалою: від дуже погано до дуже добре.
Сплануйте кроки задля підвищення своїх результатів до найвищої позначки шкали. Скористайтесь порадами вчителя або вчительки чи допомогою друзів.
 |
Можу навести приклади засобів автоматизованого створення вебсторінок. |
 |
Умію створювати вебсторінки за допомогою автоматизованих засобів та публікувати їх в інтернеті. |
 |
Дотримуюсь правил ергономічного розміщення матеріалів на вебсторінці. |
 |
Розумію поняття мови гіпертекетової розмітки. |
 |
Використовую гіпертекстові, графічні й мультимедійні елементи на вебсторінках. |
 |
Усвідомлюю важливість участі в діяльності глобальної інтернет-спільноти. |
Це матеріал з підручника Інформатика 8 клас Морзе, Барна (2021)
Наступна сторінка: Словник термінів з інформатики за 8 кл...